<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chapter 2: I Must Be Dreaming</title>

<link rel="shortcut icon" href="images/2reading.gif">
<link href="foti.css" rel="stylesheet" type="text/css">

<style type="text/css">

#canvas {
	margin: 10px auto 0 auto;
	border: 5px double #aa9e8c;
}

#bg, #char {display: none;}

.bubble 
{
margin: 350px 0 0 790px;
position: absolute;
width: 130px;
height: auto;
padding: 10px;
background: #555;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #fff;
size: 14px;
}

.bubble:after 
{
content: "";
position: absolute;
top: 29px;
left: -11px;
border-style: solid;
border-width: 10px 11px 14px 0;
border-color: transparent #555;
display: block;
width: 0;
z-index: 1;
}


</style>

<script type="text/javascript">
var vc, vctx, vi1, bgr;
	function init(){
		vc = document.getElementById("canvas");
		vctx = vc.getContext("2d"); 
		bgr = document.getElementById("bg");
		vctx.drawImage(bgr,0,0,800,600);
		vi1 = document.getElementById("char");
		setInterval("animation()",600);
	}

	var dax = 0; counter=0;
	function animation() {
		if (counter >= 6) counter = 0; else counter++;
		vctx.drawImage(bgr,0,0,800,600);
		vctx.drawImage(vi1,dax,0,400,400, 200,220, 400, 400);
		dax = 400 * counter;
	}
</script>

</head>

<body onload="init()">

	<h1>Figment of the Imagination</h1>
	<h2>Chapter 2: I Must Be Dreaming</h2>
	<h2>Alternate Scene 1: Corridors and the People</h2>


<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>

<div id="content">

<div class="bubble">
What? Why do these people laughing?
</div>

<center><canvas id="canvas" width=800 height=600></canvas></center>
<img id="bg" src="images/ch1/Corridors.png" width=800 height=600>
<img id="char" src="images/ch2/walking.png">

<center><img src="images/photo.png" width=800 style="margin:-4px 0 0 0;"></center>

<div id="scenetext">
<p>
As Ada wandered through the corridors, a lot of people are looking at her, she concluded where her subconscious is at, the school. 
It was a disaster, as if a twister mutilated the place numerous times, wrecking every part of it. 
</p>

<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>
	
</div>

<div align="center" style="padding-bottom: 30px;">
<a href="Chapter2.jsp" title="Back to Preview"><button id="button">BACK</button></a>
<a href="tableofcontent.jsp" title="Back to Table of Contents"><button id="button2">TABLE OF CONTENTS</button></a>
<a href="Chapter2Scene2.jsp" title="American Li-tortured"><button id="button">NEXT</button></a>
</div>

</div>


</body>
</html>

